<template>
    <div class="echartNav w-flex2">

        <!--  我在使用ui组件库 =》为单独创建一个.vue文件 -->
        <Wselect  placeholder="跟进次数" disabled></Wselect>
       
         
          <Wselect  placeholder="按月统计" disabled></Wselect>  
          <Wselect  placeholder="选择的人员"  @getSelectItem="getSelectPro" :optionsDatas="headerNav.pro"></Wselect>
          <Wselect  placeholder="选择部门"  @getSelectItem="getSelectS" :optionsDatas="headerNav.section"></Wselect>
          <el-button @click="changeData">查询</el-button>
          <el-button>重置</el-button>
    </div>
</template>

<script setup lang="ts">
   import Wselect from '@/components/Wselect/index.vue'
   import {businessCList} from '@/http/api/businessC'
   import {ref} from 'vue'
   //获取到后端的数据 =》 选择的数据
   
   let headerNav = ref({
        time:[
            {label:'1月',value:'1月'},
            {label:'2月',value:'2月'},
            {label:'3月',value:'3月'},
            {label:'4月',value:'4月'},
            {label:'5月',value:'5月'},
        ],
        pro:[
            {label:'张三',value:'张三'},
            {label:'悟空',value:'悟空'},
           
        ],
        section:[
            {label:'ka1',value:'ka1'},
            {label:'ka2',value:'ka2'},
           
        ]
   })

//    点击 查询获取到数据 =》 发送请求 =》可视化图表


 //选择的人员
 let selectPro = ref('张三')
const getSelectPro = (val:any)=>{
 
   selectPro.value = val
   
}
//选择的部门
let selectSection  =ref('ka1')
const getSelectS = (val:any)=>{
 
    selectSection .value = val
}
const changeData = ()=>{
    if(selectSection.value&&selectPro.value){
        getEchartsD(selectSection,selectPro) 
    }else{
            console.log('请选择');
            
    }
   
}

//工作中我们的网络请求 =》自己在写一个处理方法进行包裹 =>把这个数据发送给子组件（图表组件）
 let getEchartDs = ref({})
const getEchartsD = (selectSection:any={},selectPro:any={})=>{
    businessCList({pro:selectPro.value,section:selectSection.value}).then((res:any)=>{
        console.log(res); //获取到后端给的数据  =>把这个数据给 
      
        getEchartDs.value = res.datas
        emits('getEcharts',getEchartDs.value)
    })
}
// 1 获取到默认数据
getEchartsD()

//把数据给父组件 =>子组件给父组件数据

let emits = defineEmits(['getEcharts'])
   
</script>

<style>

</style>